<template>
	<div>
		<el-row>
			<el-col :span="8">
				<el-card class="index-data">
					<div class="data-inner">
						<div class="data-top">
							<h3>
								<img src="../../../../assets/images/icon-index-1.png" />
								订单量
							</h3>

							<el-select v-model="value" size="small" class="choose-time"><el-option value="1" label="本周"></el-option></el-select>
						</div>

						<div class="data-content">
							<div class="data-number">
								<h1>10000</h1>
								<span>单</span>
							</div>
							<div class="data-trend trend-rise">
								<span>同比增长</span>
								<b>+15%</b>
								<i class="el-icon-top"></i>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card class="index-data">
					<div class="data-inner">
						<div class="data-top">
							<h3>
								<img src="../../../../assets/images/icon-index-2.png" />
								出库单量
							</h3>

							<el-select v-model="value" size="small" class="choose-time"><el-option value="1" label="本周"></el-option></el-select>
						</div>

						<div class="data-content">
							<div class="data-number">
								<h1>8888</h1>
								<span>件</span>
							</div>
							<div class="data-trend trend-fall">
								<span>同比降低</span>
								<b>-5%</b>
								<i class="el-icon-bottom"></i>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card class="index-data">
					<div class="data-inner">
						<div class="data-top">
							<h3>
								<img src="../../../../assets/images/icon-index-3.png" />
								商品222   销量趋势
							</h3>

							<el-select v-model="value" size="small" class="choose-time"><el-option value="1" label="本周"></el-option></el-select>
						</div>

						<div class="data-content">
							<div class="data-number">
								<h1>12345</h1>
								<span>件</span>
							</div>
							<div class="data-trend trend-rise">
								<span>同比增长</span>
								<b>+8%</b>
								<i class="el-icon-top"></i>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<div class="index-chart">
			<div class="chart-title">
				<h1>订单统计</h1>

				<div class="chart-operator">
					<el-button-group>
						<el-button>本日</el-button>
						<el-button>本周</el-button>
						<el-button>本月</el-button>
					</el-button-group>

					<el-date-picker class="choose-date" v-model="date" type="date" placeholder="选择日期"></el-date-picker>
				</div>
			</div>

			<div class="chart-box">
				<div id="chart" class="chart-content"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: '1',
			date: '',

			option: {
				title: {
					text: ''
				},
				tooltip: {},
				legend: {
					data:['本月','上月']
				},
				xAxis: {
					data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					axisLine: {
						lineStyle: {
							color: '#bcbcbc'
						}
					},
					axisLabel: {
						textStyle: {
							color: "#555"
						}
					}
				},
				yAxis: {
					axisLine: {
						lineStyle: {
							color: '#bcbcbc',
							with: 0
						}
					},
					axisLabel: {
						textStyle: {
							color: "#555"
						}
					}
				},
				series: [
					{
						name: '本月',
						type: 'bar',
						data: [800, 900, 1000, 993, 1200, 786, 1078, 445, 678, 1200, 1066, 889],
						color: '#19d4ae'
					},
					{
						name: '上月',
						type: 'bar',
						data: [700, 840, 1050, 990, 1150, 686, 878, 645, 778, 1100, 966, 899],
						color: '#5ab1ef'
					},
				]
			}
		};
	},
	methods: {
		drawLine() {
			let myChart = this.$echarts.init(document.getElementById('chart'));
			myChart.setOption(this.option);
		}
	},
	mounted() {
		// 在mounted中调用初始化函数
		this.drawLine();
	}
};
</script>

<style lang="scss">
.index-data {
	width: 80%;
	max-width: 340px;
	margin: 0 auto;

	.data-inner {
		width: 100%;
		.data-top {
			align-items: center;
			justify-content: space-between;
			display: flex;

			h3 {
				font-size: 18px;
				align-items: center;
				display: flex;
				img {
					width: 24px;
					height: auto;
					margin-right: 5px;
				}
			}
			.choose-time {
				width: 80px;
				.el-input--small .el-input__inner {
					font-size: 12px;
				}
			}
		}
		.data-content {
			padding: 14px 0 8px 0;
			.data-number {
				justify-content: center;
				align-items: baseline;
				display: flex;
				h1 {
					font-size: 36px;
					font-weight: normal;
					margin-right: 5px;
				}
				span {
					font-size: 16px;
				}
			}
			.data-trend {
				font-size: 14px;
				justify-content: center;
				align-items: baseline;
				display: flex;
				margin-top: 5px;
				b {
					font-weight: normal;
					margin: 0 4px;
				}
			}
			.trend-rise {
				b {
					color: #ff5642;
				}
				i {
					font-weight: bold;
					color: #ff5642;
				}
			}
			.trend-fall {
				b {
					color: #1ba57b;
				}
				i {
					font-weight: bold;
					color: #1ba57b;
				}
			}
		}
	}
}
.index-chart {
	width: 100%;
	padding: 50px 10px 0 10px;
	.chart-title {
		width: 100%;
		justify-content: space-between;
		display: flex;

		h1 {
			font-size: 18px;
			color: #333;
		}
		.chart-operator {
			display: flex;
			align-items: center;
			.choose-date {
				margin-left: 20px;
			}
		}
	}
	.chart-box {
		padding: 30px 0 0 0;
		.chart-content {
			width: 100%;
			height: 500px;
		}
	}
}
</style>
